<template>
  <div>
     <div class="father">
       <div class="box" @click='id=1' :class='{active:id===1}'>1</div>
       <div class="box" @click="id=2" :class='{active:id===2}'>2</div>
       <div class="box" @click='id=3' :class='{active:id===3}'>3</div>
       
     </div>
   </div>
</template>
 
<script>
export default {
 
  data() {
    return {
      id:1,
      };
  },
 
  methods: {}
};
</script>

<style scoped>
     .box {
        border: 1px solid #333;
        width: 250px;
        height: 250px;
     }
     .father {
       display: flex;
     }
      .active {
        background-color: #087;
     }
</style>